{% extends "/layout.twig" %}

{% block content %}
<link rel="stylesheet" type="text/css" href="/src/css/main.css" media="all">
<section class="larry-wrapper">
    <div class="row state-overview">
        <div class="col-lg-3 col-sm-6">
            <section class="panel" style="height: 100px;">
                <div class="symbol userblue"><i class="fa fa-users"></i>
                </div>
                <div class="value">
                    <a href="#">
                        <h1 id="count1">{{user_number}}</h1>
                    </a>
                    <p>用户总量</p>
                </div>
            </section>
        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="panel">
                <div class="symbol commred"><i class="fa fa-user"></i>
                </div>
                <div class="value">
                    <a href="#">
                        <h1 id="count2">{{register_today}}</h1>
                    </a>
                    <p>今日注册用户</p>
                </div>
            </section>
        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="panel">
                <div class="symbol articlegreen">
                    <i class="fa fa-cloud"></i>
                </div>
                <div class="value">
                    <a href="#">
                        <h1 id="count3">50</h1>
                    </a>
                    <p>接口访问</p>
                </div>
            </section>
        </div>
        <div class="col-lg-3 col-sm-6">
            <section class="panel">
                <div class="symbol rsswet">
                    <i class="fa fa-exclamation-triangle"></i>
                </div>
                <div class="value">
                    <a href="#">
                        <h1 id="count4">0</h1>
                    </a>
                    <p>错误报告</p>
                </div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <section class="panel" style="min-height: 392px;">
                <header class="panel-heading bm0">
                    <span class='span-title'>系统概览</span>
                    <span class="tools pull-right"><a href="javascript:void(0);" class="iconpx-chevron-down"></a></span>
                </header>
                <div class="panel-body">
                    <table class="table table-hover personal-task">
                        {% verbatim %}
                        <tbody>
                        <tr>
                            <td>
                                <strong>版本信息</strong>： <a href="https://github.com/AxiosCros/tpr-cms"
                                                               target="_blank">TPR
                                CMS</a>  v3.0.0
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>开发作者</strong>：流水无痕( <a href="https://hanxv.cn" target="_blank">hanxv.cn</a> )
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>网站域名</strong>：{{env.domain}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>操作系统</strong>：{{env.os}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>服务器IP</strong>：{{env.server_ip}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>服务器环境</strong>：{{env.server_env}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>磁盘空间</strong>：{{env.disk}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>最大上传限制</strong>：{{env.upload_limit}}
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <strong>当前登录用户</strong>： <span class="current_user">{{env.username}}</span>
                            </td>
                            <td></td>
                        </tr>
                        </tbody>
                        {% endverbatim %}
                    </table>
                </div>
            </section>
        </div>
        <div class="col-lg-6">
            <section class="panel">
                <header class="panel-heading bm0">
                    <span class='span-title'>用户增长量</span>
                    <!--<span class="badge" style="background-color:#FF3333;"> new </span>-->
                    <span class="tools pull-right"><a href="javascript:void(0);" class="iconpx-chevron-down"></a></span>
                </header>
                <div class="panel-body">
                    <div id="user-echart" style="min-height: 300px;"></div>
                </div>
            </section>
        </div>
    </div>
</section>
<script type="text/javascript">
    const vue = new Vue({
        el: ".table",
        data: {
            env: {
                domain: '',
                os: '',
                server_ip: '',
                server_env: '',
                disk: '',
                upload_limit: '',
                username: ''
            }
        }
    });
    vue.$nextTick(function () {
        const url = "{{ url('index','index','main') }}";
        $.post(url, {}, function (res) {
            vue.env = res.env;
            console.log(res.env);
        });
    });
    layui.use(['jquery', 'layer', 'element'], function () {
        window.jQuery = window.$ = layui.jquery;
        window.layer = layui.layer;
        window.element = layui.element;

        $('.panel .tools .iconpx-chevron-down').click(function () {
            const el = $(this).parents(".panel").children(".panel-body");
            if ($(this).hasClass("iconpx-chevron-down")) {
                $(this).removeClass("iconpx-chevron-down").addClass("iconpx-chevron-up");
                el.slideUp(200);
            } else {
                $(this).removeClass("iconpx-chevron-up").addClass("iconpx-chevron-down");
                el.slideDown(200);
            }
        })

    });
</script>

<script src="/src/plugs/echarts/echarts.min.js"></script>

<script type="text/javascript">
    const userChart = echarts.init(document.getElementById('user-echart'));
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['用户增长量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '用户数',
                type: 'line',
                stack: '增长量',
                data: []
            }
        ]
    };

    postSomething("{{ url('index','index','user') }}", {}, function (res) {
        option.xAxis.data = res.data.day;
        option.series[0].data = res.data.data;
        userChart.setOption(option);
    });

    function postSomething(url, obj, callback) {
        $.ajax({
            type: "POST",
            url: url,
            enctype: 'multipart/form-data',
            data: obj,
            success: function (res) {
                if (callback === undefined) {
                    callback = function (res) {
                        if (res.code) {
                            layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                                reloadTable();
                                layer.closeAll();
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1500});
                        }
                    };
                }
                callback(res);
            }
        });
    }

</script>
{% endblock %}